<template>
  <div class="container">
    <div v-show="!showDetail">
      <!-- 搜索 -->
      <table>
        <tr>
          <th>
            <span>校区：</span>
            <el-button @click="openCourseList = true" type="text" style="width: 250px; text-align: left;">
              <span v-if="courseSelect">{{courseSelect.name}}</span>
              <span v-else>未选择</span>
            </el-button>
          </th>
          <th style="width: 400px;">
            <span>功能区关键字：</span>
            <el-input style="width: 200px;" />
          </th>
          <th style="width: 100px;">
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
          </th>
        </tr>
      </table>

      <hr />
      <el-table
        :data="areaList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        stripe
        border
        @row-click="rowClick"
      >
        <el-table-column prop="id" label="场地名称" />
        <el-table-column prop="name" label="场地类型" />
        <el-table-column prop="school_name" label="负责人" />
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        style="margin-left: 30%;"
      ></el-pagination>
    </div>
    <div v-show="showDetail">
      <fieldInchargeDetails :areaDetails="areaDetails" @closeDetailDialog="closeDetailDialog" />
    </div>
  </div>
</template>

<script>
import fieldInchargeDetails from "@/views/education-collegeField/field-incharge/details";
export default {
  name: "Area",
  data() {
    return {
      tableTotal: 0,
      currentPage: 1,
      pagesize: 10,
      showDetail: false, //功能区详情显示
      areaDetails: {}, //某一行功能区的详情
      schoolList: [], //校区列表
      areaList: [], //功能区列表
      search_areaName: "", //功能区名称关键字--输入的搜索条件
      search_compusName: "" //校区名称关键字 ---输入的搜索条件
    };
  },
  components: {
    fieldInchargeDetails
  },
  created() {
    //获取功能区列表
    this.getAreaList();
    //获取校区列表
    this.getSchoolList();
  },
  methods: {
    //获取功能区列表
    getAreaList() {
      this.areaList = [
        {
          id: "12345",
          college_id: "123456789",
          school_id: "12345678",
          name: "第一教学楼",
          english_name: "The first teaching building",
          telephone: "18023649352",
          discription: "暂无描述",
          create_time: "2020-6-12 20:30:00",
          by_who: "（userid）"
        },
        {
          id: "12346",
          college_id: "123456789",
          school_id: "12345678",
          name: "第二教学楼",
          english_name: "The second teaching building",
          telephone: "18023649352",
          discription: "暂无描述",
          create_time: "2020-6-12 20:30:00",
          by_who: "（userid）"
        }
      ];
    },

    //获取校区列表
    getSchoolList() {},

    //条件搜索
    search_area() {},

    //点击某一行，显示功能区详情
    rowClick(val) {
      this.areaDetails = val;
      this.showDetail = true;
    },

    //详情组件传来的数据
    closeDetailDialog(val) {
      this.showDetail = val;
    },

    // 换页
    handleSizeChange: function(size) {
      this.pagesize = size;
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    }
  }
};
</script>

<style scoped>
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
span {
  font-weight: 500;
}
th {
  text-align: left;
}
</style>
